
<%@ page import="com.onlinevideo.entity.Video" %>
<%@ page import="java.util.List" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>视频列表</title>
    <link rel="stylesheet" href="../static/css/font-awesome.css">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="../static/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../static/js/sweetalert.min-2.1.2.js" type="text/javascript"></script>
    <script src="../static/js/jquery.cookies.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var $insertVideoItem = $("#insertVideoItem");
            $(".queryVideo").click(function () {
                var videoId = $("input[type='radio']:checked").attr("data-id");
                console.log(videoId)
                $insertVideoItem.val(videoId)
                $.ajax({
                    url: "../video.do",
                    type: "GET",
                    data: {
                        "action": "queryVideoItemByVideoId",
                        "videoId": videoId
                    },
                    success: function (data) {
                        console.log(data)
                        var parse = JSON.parse(data);
                        console.log(parse)
                        var $videoItemInfo = $("#videoItemInfo");
                        $videoItemInfo.empty();
                        for (var i = 0; i < parse.length; i++) {
                            var videoItemBtn = "<td><button class='btn btn-primary queryVideoItem' data-toggle='modal' data-target='#queryVideoModal' data-src='" + parse[i].url + "' data-id='" + parse[i].id + "'>查看视频</button></td>";
                            $videoItemInfo.append("<tr class='tr'><td>" + (i + 1) + "</td><td>" + parse[i].name + "</td>" + "<td>" + parse[i].sortCount + "</td>" + videoItemBtn + "</tr>");
                        }
                    }
                })
            })

            $("body").on("click", ".queryVideoItem", function () {
                var src = $(this).attr("data-src");
                var src1 = $("#videoItemSrc").attr("src");
                if (src != src1) {
                    $("#videoItemSrc").attr("src", src);
                }
                $('#videoItemSrc').trigger('play');
            });
            $("#queryVideoModal .clo").click(function () {
                $('#videoItemSrc').trigger('pause');
            });



            $("#pass").click(function () {
                var videoId = $("input[type='radio']:checked").attr("data-id");
                $.ajax({
                    url:"../video.do",
                    type: "GET",
                    data: {
                        action:"checkVideo",
                        videoId:videoId,
                        pass:"pass"
                    },
                    success:function (data) {
                        var parse = JSON.parse(data);
                        swal("提示", parse.message, "success").then(function (isOk) {
                            window.location.reload();
                        });
                    }
                });
            });


            $("#delete").click(function () {
                var videoId = $("input[type='radio']:checked").attr("data-id");
                var reasonInput = $("#reasonInput").val().trim();
                if (!reasonInput){
                    swal("提示", "请输入原因", "success").then(function (isOk) {});
                }
                $.ajax({
                    url:"../video.do",
                    type: "GET",
                    data: {
                        action:"checkVideo",
                        videoId:videoId,
                        pass:"delete",
                        reason:reasonInput
                    },
                    success:function (data) {
                        var parse = JSON.parse(data);
                        swal("提示", parse.message, "success").then(function (isOk) {
                            window.location.reload();

                        });
                    }
                });
            });

            function getObjectURL(file) {
                var url = null;
                if (window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            }
        });
    </script>
    <style>
        td, th {
            text-align: center;
            padding: 0;
        }

        body::-webkit-scrollbar {
            display: none; /*隐藏滚动条*/
        }

        .content::-webkit-scrollbar {
            display: none; /*隐藏滚动条*/
        }
    </style>
</head>
<body>

<div class="container-fluid">
    <div class="row" style="text-align:center;">
        <div class="col-md-12" style="padding: 0">
            <div class="col-md-6">
                <div class="row" style="text-align: left;margin-left: 10px;">
                    <button class="btn btn-primary queryVideo">查询子集</button>
                    <button class="btn btn-primary editVideo" data-toggle="modal" id="pass" data-target="#editVideoModal">通过</button>
                    <button type="button" class="btn btn-danger " data-toggle="modal" data-target="#deleteBtn">不通过</button>                </div>
                <div class="row" style="max-height: 350px;overflow: auto;padding: 10px;padding-bottom: 0px;margin: 0">
                    <table class="table table-bordered" style="margin-bottom:0px ">
                        <thead>

                        <tr>
                            <th colspan="9">视频信息</th>
                        </tr>
                        <tr>
                            <th style="width: 200px">选择</th>
                            <th style="width: 200px">序号</th>
                            <th style="width: 200px">视频名称</th>
                            <th style="width: 200px">视频分类</th>
                            <th style="width: 200px">更新时间</th>
                            <th style="width: 200px">封面</th>
                            <th style="width: 200px">视频描述</th>
                        </tr>
                        </thead>
                        <tbody id="videoInfo">
                        <%

                            List<Video> videos = (List<Video>)request.getAttribute("videos");
                            for (int i = 0; i < videos.size(); i++) {
                                Video value = videos.get(i);
                                Long id = value.getId();
                        %>
                        <tr>
                            <td style="width: 200px">
                                <input class="checkVideo" type="radio" name="selectVideo"
                                       data-id="<%=id%>" <%= i ==0 ?"checked":""%> >
                            </td>
                            <td style="width: 200px">
                                <%=i%>
                            </td>

                            <td style="width: 200px">
                                <%=value.getVideoName()%>
                            </td>
                            <td style="width: 200px"><%=value.getCategoryId()%>
                            </td>
                            <td style="width: 100px"><%=value.getUploadTime()%>
                            </td>
                            <td style="width: 200px"><img src="<%=request.getContextPath()+value.getVideoImg()%>"
                                                          width="100px" height="60px" alt="">
                            </td>
                            <td style="width: 200px">
                                <%=value.getVideoDescription()%>
                            </td>

                        </tr>
                        <%
                            }
                        %>

                        </tbody>
                    </table>
                </div>

                <div class="modal fade" style="top: 50px" id="queryVideoModal" tabindex="-1" role="dialog"
                     aria-labelledby="queryVideoModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close clo" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="queryVideoModalLabel">查看视频</h4>
                            </div>
                            <div class="modal-body">
                                <div class="head" style="height: 400px;">
                                    <video width="100%" height="100%" controls="controls" id="videoItemSrc"
                                           src="../uploadFile/videos/0.mp4"></video>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default clo" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-md-6" style="max-height: 450px;overflow: auto;padding: 10px;margin: 0">
                <table class="table table-bordered" style="margin-bottom:0px ">
                    <thead>
                    <tr>
                        <th colspan="4">子集信息</th>
                    </tr>
                    <tr>
                        <th>序号</th>
                        <th>子集名称</th>
                        <th>集数</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="videoItemInfo">
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
<div class="add">
    <div class="modal fade" id="deleteBtn" tabindex="-1" role="dialog" aria-labelledby="addBookLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addBookLabel">审核未通过</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-2"></div>
                        <div class="col-md-8">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="reasonInput" class="col-sm-3 control-label">请输入未通过理由</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="reasonInput"
                                               name="username" placeholder="请输入未通过理由">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="row">
                        <div class="col-md-2"></div>
                        <div class="col-md-8">
                            <div class="col-md-4">
                                <button type="button" class="btn btn-primary opera" id="delete">添加</button>
                            </div>
                            <div class="col-md-4">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="height: 100px"></div>
</body>
</html>
